<template>
  <Drawer width="1200px" :visible="props.showDrawer" @close="drawerCancelFn">
    <!--    <template #title></template>-->
    <!--    <template #extra><CloseOutlined @click="drawerCancelFn" /></template>-->
    <!--   【1】标题信息   -->
    <h4 class="title-sign">盘点单信息</h4>
    <div id="print-box">
      <h2 style="text-align: center; font-size: 28px">盘点单</h2>
      <div style="display: flex; justify-content: space-between; margin-bottom: 20px">
        <span>盘点单号：{{ state.inventoryData.batchNo }}</span>
        <span>创建时间：{{ state.inventoryData.createTime }}</span>
        <span>盘点日期：{{ state.inventoryData.inventoryTime }}</span>
        <span>{{ state.inventoryData?.status === 10 ? '存档完成' : '存档未完成' }}</span>
        <span>
          盘点数量：{{
            state.inventoryData?.stocks?.reduce((pre, cur) => {
              return pre + cur.subSpecimens.length;
            }, 0)
          }}
        </span>
      </div>
      <!--   【2】表格信息   -->
      <h4 class="title-sign">样本信息</h4>
      <vxe-table
        ref="tableRef"
        :data="
          state.inventoryData?.stocks?.reduce((pre, cur) => {
            pre.push(...cur.subSpecimens);
            return pre;
          }, [])
        "
        :export-config="{}"
      >
        <vxe-column
          title="样本类型"
          :formatter="
            ({ row }) => {
              return row.extDataList?.find((item) => item?.key === 'specimen_type')?.value;
            }
          "
        />
        <vxe-column field="serial" title="数字编号" />
        <vxe-column field="storageDesp" title="存储位置" />
        <vxe-column field="originalSerial" title="样本编号" />
        <vxe-column field="name" title="样本名称" />
        <vxe-column field="projectName" title="项目组" />
      </vxe-table>
    </div>
    <!--   【2】表格信息   -->
    <Space style="display: flex; justify-content: center; margin-top: 10px" :size="60">
      <Button @click="tableRef?.exportData()">Excel导出</Button>
      <Button type="blue-white" @click="printFn">打印</Button>
    </Space>
    <!--   【4】存档信息   -->
    <template v-if="state.inventoryData?.status === 10">
      <h4 class="title-sign">存档文件</h4>
      <div style="display: flex">
        <div @click="state.showHighCamera = true" style="width: 100px; height: 100px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; margin-right: 10px">
          <svg t="1683701718490" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2508" width="30" height="30">
            <path
              d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
              fill="#444444"
              p-id="2509"
            ></path>
          </svg>
        </div>
        <div style="display: flex; flex-direction: column">
          <p v-for="item in state.inventoryData?.inventoryAttachments" :key="item.id" style="display: flex; color: #1f59f7">
            <span style="margin-right: 5px" @click="state.showHighCamera = true">{{ item.name }}</span>
            <span v-show="!/签名文件/.test(item.name)" @click="delFileFn(item)">
              <svg style="cursor: pointer" t="1681117743816" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2701" width="23" height="23">
                <path
                  d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z"
                  fill="#1296db"
                  p-id="2702"
                ></path>
              </svg>
            </span>
          </p>
        </div>
      </div>
      <Modal :destroyOnClose="true" :maskClosable="false" :footer="null" title="底单存档" width="60%" v-model:visible="state.showHighCamera">
        <HighCameracopy
          :attachments="state.inventoryData?.inventoryAttachments"
          highCameraId="inputManageHighCamera"
          canvasCameraId="inputManageCanvasCamera"
          :billId="String(props.data.id)"
          :billType="4"
          @upload-success="uploadSuccess"
        />
      </Modal>
      <h4 class="title-sign">历史修改记录</h4>
      <vxe-table :data="state.inventoryData?.histories">
        <vxe-column field="modifyTime" title="修改日期" />
        <vxe-column field="modifierId" title="修改人" />
        <vxe-column field="modifyReason" title="修改说明" />
      </vxe-table>
    </template>
  </Drawer>
</template>

<script setup lang="ts">
import { Drawer, message, Modal, Space } from 'ant-design-vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import Button from '@/framework/components/basic/button/button.vue';
import { reactive, ref, watch } from 'vue';
import { getInventoryDetail } from '@/modules/sample-inventory/api';
import Print from 'print-js';
import HighCameracopy from '@/components/photograph/HighCameracopy.vue';

const props = defineProps<{
  showDrawer: boolean;
  data;
}>();
watch(
  () => props.showDrawer,
  async (newValue) => {
    if (!newValue) return;
    const res = await getInventoryDetail(props.data.id);
    state.inventoryData = res.result;
  },
);
const emits = defineEmits<{
  (e: 'update:showDrawer', state: boolean): void;
}>();
const state = reactive({
  inventoryData: [],
  showHighCamera: false,
});
const tableRef = ref();

const uploadSuccess = async () => {
  state.showHighCamera = false;
  const res = await getInventoryDetail(props.data.id);
  state.inventoryData = res.result;
};
const delFileFn = async (item) => {
  await delFileFn(item.id);
  message.success('操作成功！');
  await uploadSuccess();
};

const drawerCancelFn = () => {
  state.inventoryData = [];
  state.showHighCamera = false;
  emits('update:showDrawer', false);
};
/**
 * fn
 */
// 打印
const printFn = () => {
  Print({
    printable: 'print-box',
    type: 'html',
    headerStyle: 'font-weight:400;text-align:center;',
    maxWidth: 1500,
    targetStyles: ['*'],
  });
};
</script>

<style scoped lang="less">
span {
  white-space: nowrap;
}
</style>
